<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_index/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 网页的头部 -->
    <div class="top-wrap">
        <div class="top-nav">
            <ul class="top-nav-l">
                <li>欢迎光临文轩书社！</li>
                <li>
                    <p class="index-login"><a href=login.html>请<span>登录</span></a></p>
                    <p class="welcome"><span>xxx</span>欢迎您&nbsp;&nbsp;<i>退出</i></p>
                </li>
                <li>
                    <a href="register.html">免费注册</a>
                </li>
            </ul>
            <ul class="top-nav-r">
                <li>
                    <a href="##">我的书社</a> 
                    <span></span>
                    <ul class="list">
                        <li><a href="##">我的订单</a> </li>
                        <li><a href="##">售后退换</a> </li>
                        <li><a href="##">暂存款  </a> </li>
                        <li><a href="##">礼券    </a> </li>
                        <li><a href="##">购书卡  </a>  </li>
                    </ul>
                </li>
                <li><a href="##">企业采购</a></li>
                <li>
                    <a href="##">客户服务</a>
                    <span></span>
                    <ul>
                        <li><a href="##">在线客服</a></li>
                        <li><a href="##">帮助中心</a></li>
                    </ul>
                </li>
                <li><a href="##">手机书社</a><span></span></li>
            </ul>
        </div>
    </div>
    <div class="empty"></div>
    <!-- 网页的隐藏搜索 -->
    <div class="hide-search-wrap">
        <div class="hide-search">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <form action="">
                <input type="text">
                <input type="submit" value="搜索">
            </form>
        </div>
    </div>    
    <!-- 网页的搜索 -->
    <div class="search-wrap-wrap">
        <div class="search-wrap">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="search">
                <form action="">
                    <input type="text">
                    <input type="submit" value="搜索">
                </form>
                <div class="hot">
                    热搜 :
                    <a href="##">9月领券区</a>
                    <span>|</span>
                    <a href="##">习近平谈治国理政3</a>
                    <span>|</span>
                    <a href="##">今日秒杀</a>
                    <span>|</span>
                    <a href="##">曾国藩</a>
                    <a href="##">高级搜索</a>
                </div>
            </div>
            <div class="cart">
                <aside>
                    <i>0</i>
                    <a href="cart.html">购物车</a>    
                </aside>
            </div>
        </div>
    </div>
    <!-- 网页的主导航 -->
    <div class="nav-wrap">
        <div class="nav">
            <div class="main">
                <i class="iconfont icon-caidan
                "></i>
                &nbsp;&nbsp;全部商品分类
            </div>
            <div class="item">
                <a href="##">图书畅销榜</a>
                <a href="##">新书热卖榜</a>
                <a href="##">童书绘本</a>
                <a href="##">小说文学</a>
                <a href="##">科技经管</a>
                <a href="##">网络科技</a>
                <a href="##">医学</a>
                <a href="##">教材教辅</a>
                <a href="##">生活艺术</a>
            </div>
        </div>
    </div>
    <!-- 网页的banner -->
    <div class="banner">
        <div class="imgbox">
            <a href="##"><img src="images/banner1.jpg" alt=""></a>
            <a href="##"><img src="images/banner2.jpg" alt=""></a>
            <a href="##"><img src="images/banner3.jpg" alt=""></a>
            <a href="##"><img src="images/banner4.jpg" alt=""></a>
            <a href="##"><img src="images/banner5.jpg" alt=""></a>
        </div>
    </div>
    <!-- banner里的子导航 -->
    <div class="subnav">
        <div class="menu">
            <figure>
                童书 育儿
                <figcaption>
                    <a href="##"> 绘本</a>&nbsp;<span>|</span>
                    <a href="##">国学启蒙</a>&nbsp;<span>|</span>
                    <a href="##">趣味童书</a><br>
                    <a href="##">幼小衔接入学&nbsp;</a><span>|</span>
                    <a href="##">兴趣培养</a>
                    <aside >
                        <ul>
                            <li>
                                <p>0-6岁<i>></i></p> 
                                <p>
                                    <a href="##">幼儿绘本</a><span>|</span>
                                    <a href="##">幼儿启蒙</a><span>|</span>
                                    <a href="##">国学启蒙</a><span>|</span>
                                    <a href="##">趣味图书</a><span>|</span>
                                    <a href="##">注音读物</a><span>|</span>
                                    <a href="##">中外名著</a><span>|</span>
                                    <a href="##">智力开发</a><span>|</span>
                                    <a href="##">幼小衔接入学</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>6岁以上<i>></i></p> 
                                <p>
                                    <a href="##">少儿科普</a><span>|</span>
                                    <a href="##">少儿文学</a><span>|</span>
                                    <a href="##">少儿童书</a><span>|</span>
                                    <a href="##">少儿读物</a><span>|</span>
                                    <a href="##">少儿英语</a><span>|</span>
                                    <a href="##">兴趣培养</a><span>|</span>
                                    <a href="##">注音读物</a><span>|</span>
                                    <a href="##">童话故事</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>点读书<i>></i></p> 
                                <p>
                                    <a href="##">点读书</a>
                                </p>
                            </li>
                        </ul>
                    </aside>    
        
                </figcaption>
            </figure>
            <figure>
                文学 小说
                <figcaption>
                    <a href="##">外国文学</a>&nbsp;<span>|</span>
                    <a href="##">国学</a>&nbsp;<span>|</span>
                    <a href="##">民间故事</a><br>
                    <a href="##">青春&nbsp;</a><span>|</span>
                    <a href="##">情感</a>
                    <a href="##">科幻</a>
                    <a href="##">职场</a>
                    <aside>
                        <ul>
                            <li>
                                <p>文学<i>></i></p> 
                                <p>
                                    <a href="##">现当代文学</a><span>|</span>
                                    <a href="##">民间文学</a><span>|</span>
                                    <a href="##">民间故事</a><span>|</span>
                                    <a href="##">经典国学</a><span>|</span>
                                    <a href="##">经典国学解析</a><span>|</span>
                                    <a href="##">外国文学</a><span>|</span>
                                    <a href="##">外国文学研究</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>小说<i>></i></p> 
                                <p>
                                    <a href="##">青春小说</a><span>|</span>
                                    <a href="##">情感小说</a><span>|</span>
                                    <a href="list.html">武侠小说</a><span>|</span>
                                    <a href="##">科幻小说</a><span>|</span>
                                    <a href="##">官场、职场小说</a><span>|</span>
                                    <a href="##">历史、军事小说</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>漫画<i>></i></p> 
                                <p>
                                    <a href="##">幽默漫画</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>诗歌散文<i>></i></p> 
                                <p>
                                    <a href="##">诗歌</a>
                                    <a href="##">散文</a>
                                    <a href="##">杂文</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>名著古籍<i>></i></p> 
                                <p>
                                    <a href="##">四大名著</a>
                                    <a href="##">历史古籍</a>
                                    <a href="##">名著读物</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>传记<i>></i></p> 
                                <p>
                                    <a href="##">中国名人传记</a>
                                    <a href="##">外国名人传记</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>作品集<i>></i></p> 
                                <p>
                                    <a href="##">作家作品集</a>
                                </p>
                            </li>
                        </ul>
                    </aside>    
                </figcaption>
            </figure>
            <figure>
                社科 经管
                <figcaption>
                    <a href="##">经济读物</a>&nbsp;<span>|</span>
                    <a href="##">市场营销</a>&nbsp;<span>|</span>
                    <a href="##">房地产</a><br>
                    <a href="##">中国共产党&nbsp;</a><span>|</span>
                    <a href="##">领导人著作</a>
                    <aside>
                        <ul>
                            <li>
                                <p>经济<i>></i></p> 
                                <p>
                                    <a href="##">大众经济读物</a><span>|</span>
                                    <a href="##">经济理论、法规</a><span>|</span>
                                    <a href="##">商业贸易</a><span>|</span>
                                    <a href="##">WTO</a><span>|</span>
                                    <a href="##">财政金融</a><span>|</span>
                                    <a href="##">统计</a><span>|</span>
                                    <a href="##">经济考试</a><span>|</span>
                                    <a href="##">工具书</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>管理<i>></i></p> 
                                <p>
                                    <a href="##">管理学</a><span>|</span>
                                    <a href="##">企业管理</a><span>|</span>
                                    <a href="##">战略管理</a><span>|</span>
                                    <a href="##">人力资源</a><span>|</span>
                                    <a href="##">市场营销</a><span>|</span>
                                    <a href="##">项目管理</a><span>|</span>
                                    <a href="##">职业经理</a><span>|</span>
                                    <a href="##">物流管理</a><span>|</span>
                                    <a href="##">文秘档案</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>政治<i>></i></p> 
                                <p>
                                    <a href="##">中国共产党</a><span>|</span>
                                    <a href="##">领导人著作</a><span>|</span>
                                    <a href="##">政治理论</a><span>|</span>
                                    <a href="##">马列主义</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>社科<i>></i></p> 
                                <p>
                                    <a href="##">新闻传播</a><span>|</span>
                                    <a href="##">公共关系</a><span>|</span>
                                    <a href="##">社科总论</a><span>|</span>
                                    <a href="##">工具书</a><span>|</span>
                                    <a href="##">综合</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>金融和投资<i>></i></p> 
                                <p>
                                    <a href="##">股票期货</a><span>|</span>
                                    <a href="##">房地产</a><span>|</span>
                                    <a href="##">保险</a><span>|</span>
                                    <a href="##">财富论坛</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>历史文化<i>></i></p> 
                                <p>
                                    <a href="">中国历史</a><span>|</span>
                                    <a href="">外国历史</a><span>|</span>
                                    <a href="">中外文化</a><span>|</span>
                                    <a href="">文物考古</a><span>|</span>
                                    <a href="">史学理论</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>哲学宗教<i>></i></p> 
                                <p>
                                    <a href="">宗教</a><span>|</span>
                                    <a href="">中国哲学</a><span>|</span>
                                    <a href="">外国哲学</a><span>|</span>
                                    <a href="">逻辑伦理学</a><span>|</span>
                                    <a href="">心理学</a><span>|</span>
                                    <a href="">美学</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>地理地图<i>></i></p> 
                                <p>
                                    <a href="##">中外地图挂图</a><span>|</span>
                                    <a href="##">中国行政地图</a><span>|</span>
                                    <a href="##">中国交通地图</a><span>|</span>
                                    <a href="##">世界地图</a><span>|</span>
                                    <a href="##">地球仪</a><span>|</span>
                                    <a href="##">地理</a>
                                </p>
                            </li>
                        </ul>
                    </aside>
        
                </figcaption>
            </figure>
            <figure>
                行业 职业
                <figcaption>
                    <a href="##">电子商务</a>&nbsp;<span>|</span>
                    <a href="##">医学科普</a>&nbsp;<span>|</span>
                    <a href="##">室内装修</a>
                    <aside>
                        <ul>
                            <li>
                                <p>自然科学<i>></i></p> 
                                <p>
                                    <a href="##">航天</a><span>|</span>
                                    <a href="##">地貌</a><span>|</span>
                                    <a href="##">光学</a><span>|</span>
                                    <a href="##">天文学</a><span>|</span>
                                    <a href="##">学术专著</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>计算机网络<i>></i></p> 
                                <p>
                                    <a href="##">编程信息</a><span>|</span>
                                    <a href="##">网络技术</a><span>|</span>
                                    <a href="##">操作系统</a><span>|</span>
                                    <a href="##">网页制作</a><span>|</span>
                                    <a href="##">图形图像</a><span>|</span>
                                    <a href="##">数据库</a><span>|</span>
                                    <a href="">输入法</a><span>|</span>
                                    <a href="">工具书</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>西医<i>></i></p> 
                                <p>
                                    <a href="##">外科</a><span>|</span>
                                    <a href="##">内科</a><span>|</span>
                                    <a href="##">小儿科</a><span>|</span>
                                    <a href="##">五官科</a><span>|</span>
                                    <a href="##">药物学</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>中医<i>></i></p> 
                                <p>
                                    <a href="##">中医各科</a><span>|</span>
                                    <a href="##">中医古籍</a><span>|</span>
                                    <a href="##">中药学</a><span>|</span>
                                    <a href="##">针灸</a><span>|</span>
                                    <a href="##">中医教材</a>
                                </p>
                            </li>
                        </ul>
                    </aside>    
        
                </figcaption>
            </figure>
            <figure>
                教材 教辅
                <figcaption>
                    <a href="##">小学教材</a>&nbsp;<span>|</span>
                    <a href="##">科普</a>&nbsp;<span>|</span>
                    <a href="##">读物</a>&nbsp;<span>|</span>
                    <a href="##">公务员</a>
                    <aside>
                        <ul>
                            <li>
                                <p>小初高教材<i>></i></p> 
                                <p>
                                    <a href="##">小学教材</a><span>|</span>
                                    <a href="##">初中教材</a><span>|</span>
                                    <a href="##">高中教材</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>小学教辅<i>></i></p> 
                                <p>
                                    <a href="##">语文</a><span>|</span>
                                    <a href="##">数学</a><span>|</span>
                                    <a href="##">英语</a><span>|</span>
                                    <a href="##">作文</a><span>|</span>
                                    <a href="##">阅读</a><span>|</span>
                                    <a href="##">综合</a><span>|</span>
                                    <a href="##">奥数</a><span>|</span>
                                    <a href="##">开发智力</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>课外读物<i>></i></p> 
                                <p>
                                    <a href="##">课外读物</a><span>|</span>
                                    <a href="##">科普读物</a><span>|</span>
                                    <a href="##">学生读物</a>
                                </p>
                            </li>
                        </ul>
                    </aside>    
        
                </figcaption>
            </figure>
            <figure>
                生活 艺术
                <figcaption>
                    <a href="##">成功学</a>&nbsp;<span>|</span>
                    <a href="##">孕产</a>&nbsp;<span>|</span>
                    <a href="##">亲子</a>&nbsp;<span>|</span>
                    <a href="##">烹饪&nbsp;</a>
                    <aside>
                        <ul>
                            <li>
                                <p>家庭婚姻<i>></i></p> 
                                <p>
                                    <a href="##">孕产育儿</a><span>|</span>
                                    <a href="##"></a><span>|</span>
                                    <a href="##">亲子家教</a><span>|</span>
                                    <a href="##">两性关系</a><span>|</span>
                                    <a href="##">家庭保障</a><span>|</span>
                                    <a href="##">文娱体育</a><span>|</span>
                                    <a href="##">生活方式</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>艺术<i>></i></p> 
                                <p>
                                    <a href="##">美术</a><span>|</span>
                                    <a href="##">设计</a><span>|</span>
                                    <a href="##">收藏</a><span>|</span>
                                    <a href="##">年历</a><span>|</span>
                                    <a href="##">书法</a><span>|</span>
                                    <a href="##">音乐</a><span>|</span>
                                    <a href="##">综合</a>
                                </p>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <p>成功励志<i>></i></p> 
                                <p>
                                    <a href="##">成功学</a>
                                </p>
                            </li>
                        </ul>
                    </aside>    
        
                </figcaption>
            </figure>
            <figure>
                    <a href="##">音像</a>&nbsp;
                    <a href="##">百货</a>&nbsp;
                    <a href="##">电子书</a>
            </figure>
            <figure>
                    <a href="##">全部分类</a>
            </figure>
        </div>

    </div>
    <!-- 手风琴 -->
    <div class="first-look floor-top">
        <div class="setback">
            <a href="##" class="setaback">
                <article>
                    <h3>流浪地球</h3>
                    <p>小说抢先看</p>
                </article>
                <img src="images/shoufengqin1.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="##">
                <article>
                    <h3>童书精选</h3>
                    <p>每周上新</p>
                </article>
                <img src="images/shoufengqin2.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="##">
                <article>
                    <h3>公共营养师</h3>
                    <p>官方教材</p>
                </article>
                <img src="images/shoufengqin3.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="##">
                <article>
                    <h3>办公书籍学起来</h3>
                    <p>提高效率</p>
                </article>
                <img src="images/shoufengqin4.jpg" alt="">
            </a>
        </div>
        <div>
            <a href="##">
                <article>
                    <h3>史诗巨献</h3>
                    <p>命运变迁</p>
                </article>
                <img src="images/shoufengqin5.jpg" alt="">
            </a>
        </div>
    </div>
    <!-- 秒杀活动 -->
    <div class="crazy">
        <ul>
            <li>
                <a href="##">
                    <h2>文轩秒杀</h2>
                    <p >限时抢购中</p>
                    <b>距离结束剩余</b>
                    <div>
                        <span>08</span>&nbsp;:
                        <span>30</span>&nbsp;:
                        <span>00</span>
                    </div>
                    <p>点击查看更多>></p>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy1.jpg" alt="">
                    <p class="dany">红墙黄瓦</p>
                    <aside>
                        <span>￥13.6</span>
                        <i>￥35.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy2.jpg" alt="">
                    <p>巫婆阿丽养的三个小家伙</p>
                    <aside>
                        <span>￥21.0</span><i>￥35.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy3.jpg" alt="">
                    <p>拼音读物</p>
                    <aside>
                        <span>￥11.0</span><i>￥21.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy4.jpg" alt="">
                    <p>雪岗</p>
                    <aside>
                        <span>￥25.0</span><i>￥36.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy5.jpg" alt="">
                    <p>微表情心理学</p>
                    <aside>
                        <span>￥23.0</span><i>￥29.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy6.jpg" alt="">
                    <p>西点军校经典法则</p>
                    <aside>
                        <span>￥29.0</span><i>￥38.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy7.jpg" alt="">
                    <p>城堡</p>
                    <aside>
                        <span>￥21.0</span><i>￥39.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy8.jpg" alt="">
                    <p>星星饼干</p>
                    <aside>
                        <span>￥19.0</span><i>￥25.0</i>
                    </aside>
                </a>
            </li>
            <li>
                <a href="##">
                    <img src="images/crazy9.jpg" alt="">
                    <p>减脂健康餐</p>
                    <aside>
                        <span>￥16.0</span><i>￥26.0</i>
                    </aside>
                </a>
            </li>
        </ul>
    </div>
    <!-- 楼层 -->
    <div class="floor">
        <ul>
            <li>导航</li>
            <li>精选<br>推荐</li>
            <li>每日<br>精选</li>
            <li>文轩<br>聚焦</li>
            <li>作家<br>推荐</li>
            <li>品牌<br>出版</li>
            <li>百货<br>音箱</li>
            <li><span class="iconfont icon-kefu"></span><br> 客服</li>
            <li><span class="iconfont icon-shangjiantou"></span><br> 顶部</li>
        </ul>
    </div>
    <!-- 每日精选 -->
    <div class="jingpin floor-top">
        <div class="jingpin-nav">
            <h3>每日精选</h3>
            <aside class="listitem">
                <a href="##" class="active2"> 童书 育儿</a>
                <a href="##"> 文学 小说</a>
                <a href="##"> 社科 经管</a>
            </aside>
       </div>
        <div class="cont">
            <article class="active1">
                <a href="##">绘本</a> <span>|</span>
                <a href="##">幼儿启蒙</a><span>|</span>
                <a href="##">国学</a> <span>|</span>
                <a href="##">趣味童书</a> <span>|</span>
                <a href="##">注音读物</a>
            </article>

            <article>
                <a href="##"> 民间文学</a><span>|</span>
                <a href="##"> 民间故事</a><span>|</span>
                <a href="##"> 外国文学</a><span>|</span>
                <a href="##"> 青春小说</a><span>|</span>
                <a href="##">情感</a>
            </article>
            <article>
                <a href="##">中国共产党</a> <span>|</span>
                <a href="##">领导人著作</a> <span>|</span>
                <a href="##">马列主义</a><span>|</span>
                <a href="##">大众经济读物</a> <span>|</span>
                <a href="##">管理学</a>
            </article>
        </div>
    </div>
    <!-- 文轩聚焦 -->
    <div class="focus floor-top"> 
        <div class="focushead">
            <h3>文轩聚焦</h3>
            <p>倾情推荐时下最热门图书</p>
       </div>
       <div class="focuslist">
           <ul>
                <li>
                    <a href="##">
                        <img src="images/focusbook1.jpg" alt="">
                        <p class="dany">减脂健康餐</p>
                        <p class="dany">作者</p>
                        <aside>
                            <span>￥16.0</span>
                            <i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook2.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook3.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook4.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook5.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook1.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook2.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook3.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook4.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="images/focusbook5.jpg" alt="">
                        <p>减脂健康餐</p>
                        <p>作者</p>
                        <aside>
                            <span>￥16.0</span><i>￥26.0</i>
                        </aside>
                    </a>
                </li>
           </ul>

       </div>

    </div>
    <!-- 作者推荐 -->
    <div class="author floor-top">
        <div class="authorhead">
            <h3>作家推荐</h3>
       </div>
       <div class="authorlist">
            <div class="listl">
                <article>
                    <h5>
                            <a href="" class="authoractive">东野圭吾</a>
                            <a href="##">杨绛</a>
                            <a href="##">马尔克斯</a>
                            <a href="##">曹文轩</a>
                            <a href="##">毕淑敏</a>
                    </h5>
                    <figure>
                            <aside>
                                <a href="##"><img src="images/author1.png" alt=""></a>
                               
                                    <h4><a href="##">东野圭吾</a></h4><br>
                                    <span>东野圭吾(1958-)出生于日本大阪，大阪府立大学毕业。1985年以第31届江户川乱步奖得奖作《放学后》出道。1999年以《秘密》获得第52届日本推理作家协会奖，第120届直木奖入围，并于1998年拍摄电影，由广末凉子主演。早期作品多为精巧细致的本格推理，之后文风逐渐超越传统推理小说的框架，其创作力旺盛的程度，让他跃居日本推理小说界的*尖作家。代表作品有：《神探伽利略》《预知梦》和《嫌疑人X的献身》（获得第134届直木奖）；以及以推理小说形式讨论教育制度缺陷与亲情的《湖畔杀人事件》等</span>
                             
                            </aside>
                            <ul>
                                <li>
                                    <a href="##">
                                        <img src="images/focusbook1.jpg" alt="">
                                        <p class="dany">减脂健康餐</p>
                                        <p>
                                            <span>￥16.0</span>
                                            <i>￥26.0</i>
                                        </p>
                                    </a>
                                </li>
                                <li>
                                    <a href="##">
                                        <img src="images/focusbook2.jpg" alt="">
                                        <p>减脂健康餐</p>
                                        <p>
                                            <span>￥16.0</span><i>￥26.0</i>
                                        </p>
                                    </a>
                                </li>
                            </ul>
                    </figure>
            </article>
            </div>
            <div class="listr">
                <h4>人气作家</h4>
                <ul>
                    <li>
                        <a href="##">余华</a>
                        <a href="##">三毛</a>
                    </li>
                    <li>
                        <a href="##">小鹏</a>
                        <a href="##">安徒生</a>
                    </li>
                    <li>
                        <a href="##">树上村树</a>
                        <a href="##">西尔斯</a>
                    </li>
                    <li>
                        <a href="##">渡边淳一</a>
                        <a href="##">李居明</a>
                    </li>
                    <li>
                </ul>
            </div>
       </div>
    </div>
    <!-- 出版社 -->
    <div class="chuban floor-top">
        <div class="chubanhead">
            <h3>品牌出版</h3>
       </div>
       <div class="chubancont">
            <dl>
                <dt><a href="##"><img src="images/chubanshe1.png" alt=""></dt></a>
                <dd><a href="##">人民东方出版传媒网</a></dd>
            </dl>
            <dl>
                <dt><a href="##"><img src="images/chubanshe2.png" alt=""></dt></a>
                <dd><a href="##">中国建筑工业出版社</a></dd>
            </dl>
            <dl>
                <dt><a href="##"><img src="images/chubanshe3.png" alt=""></dt></a>
                <dd><a href="##">北京大学出版社</a></dd>
            </dl>
            <dl>
                <dt><a href="##"><img src="images/chubanshe4.png" alt=""></dt></a>
                <dd><a href="##">清华大学出版社</a></dd>
            </dl>
            <dl>
                <dt><a href="##"><img src="images/chubanshe5.png" alt=""></dt></a>
                <dd><a href="##">中国人民大学出版社</a></dd>
            </dl>
            <dl>
                <dt><a href="##"><img src="images/chubanshe6.png" alt=""></dt></a>
                <dd><a href="##">中国邮电出版社有限公司</a></dd>
            </dl>
        </div>
    </div>
    <!-- 百货、音响、电子书 -->
    <div class="store floor-top">
        <h5>
            <a href="##">百货</a>
            <a href="##">音响</a>
            <a href="##">电子书</a>
        </h5>
        <div class="baihuocont">
            <figure class="baihuoactive">
                <dl>
                    <dt><a href="##"><img src="images/baihuo1-1.jpg" alt=""></a></dt>
                    <dd>入驻商家<br>
                        <a href="##">采撷物语</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="##">帝邦</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="##"><img src="images/baihuo1-2.jpg" alt=""></a></dt>
                </dl>
                <ul>
                    <li>
                        <a href="##"><img src="images/baihuo1-3.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/baihuo1-4.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/baihuo1-4.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/baihuo1-4.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/baihuo1-4.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                </ul>
            </figure>
            <figure>
                <dl>
                    <dt><a href="##"><img src="images/yinxiang1-1.jpg" alt=""></a></dt>
                    <dd>热门分类<br>
                        <a href="##">影视音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="##">英语学习</a><br>
                        <a href="##">卡通漫画</a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="##"><img src="images/yinxiang1-2.jpg" alt=""></a></dt>
                </dl>
                <ul>
                    <li>
                        <a href="##"><img src="images/yinxiang1-3.jpg" alt=""></a>
                        <p><a href="##"> 王菲-旧梦时光</a></p>
                    </li>
                </ul>
            </figure>
            <figure>
                <dl>
                    <dt><a href="##"><img src="images/dianzishu1-1.png" alt=""></a></dt>
                    <dd>领取后如何同步至手机阅读<br>
                        <a href="##">前往查看>></a>
                    </dd>
                </dl>
                <dl>
                    <dt><a href="##"><img src="images/dianzishu1-2.png" alt=""></a></dt>
                </dl>
                <ul>
                    <li>
                        <a href="##"><img src="images/dianzishu1-3.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/dianzishu1-4.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                    <li>
                        <a href="##"><img src="images/dianzishu1-5.jpg" alt=""></a>
                        <p><a href="##"> 遮阳伞</a></p>
                    </li>
                </ul>
            </figure>
        </div>
    </div>
    <!-- 网页的指南 -->
    <div class="guide">
            <ul>
                <li>
                    <h3> 新手入门</h3>
                    <ul>
                        <li><a href="##">购物保障</a> </li>
                        <li><a href="##">购物流程</a> </li>
                        <li><a href="##">常见问题</a> </li>
                        <li><a href="##">联系客服</a> </li>
                    </ul>
                </li>
                <li>
                    <h3> 配送服务</h3>
                    <ul>
                        <li><a href="##">货到付款区域查询</a> </li>
                        <li><a href="##">配送范围和时间 </a>  </li>
                        <li><a href="##">配送收费标准  </a>   </li>
                        <li><a href="##">验货与签收   </a>    </li>
                    </ul>
                </li>
                <li>
                    <h3> 支付方式</h3>
                    <ul>
                        <li><a href="##">货到付款  </a>  </li>
                        <li><a href="##">在线支付  </a>  </li>
                        <li><a href="##">银行转账  </a>  </li>
                        <li><a href="##">其他方式支付</a></li>
                    </ul>
                </li>
                <li>
                    <h3> 售后服务</h3>
                    <ul>
                        <li><a href="##">退换货规则   </a>    </li>
                        <li><a href="##">如何申请售后服务</a> </li>
                        <li><a href="##">退款及体现   </a>   </li>
                    </ul>
                </li>
                <li>
                    <h3> 我的订单</h3>
                    <ul>
                        <li><a href="##">下单演示</a> </li>
                        <li><a href="##">订单状态</a> </li>
                        <li><a href="##">订单取消</a> </li>
                        <li><a href="##">发票制度</a> </li>
                    </ul>
                </li>
                <li>
                    <h3> 文轩服务</h3>
                    <ul>
                        <li><a href="##">礼券    </a>   </li>
                        <li><a href="##">文轩购书卡 </a> </li>
                        <li><a href="##">文轩好书推荐</a></li>
                        <li><a href="##">交易条款  </a>  </li>
                    </ul>
                </li>
                <li>
                     <h3>电子阅读器</h3>  
                     <ul>
                        <li><a href="##">android</a>  </li>
                        <li><a href="##">ipad   </a>  </li>
                        <li><a href="##">iphone </a>  </li>
                        <li><a href="##">pc阅读器 </a> </li>
                    </ul>   
                </li>
            </ul>
    </div>
    <!-- 网页的服务 -->
    <div class="server">
        <ul>
            <li>正品保证<br>假一赔十</li>
            <li>一网打尽<br>更多优惠</li>
            <li>800城市<br>北上广深次日到达</li>
            <li>电子发票<br>报销无忧</li>
        </ul>
    </div>
    <!-- 网页的底部 -->
    <div class="footer">
        <h3>
            <a href="##">关于文轩</a>&nbsp;|
            <a href="##">联系文轩</a>&nbsp;|
            <a href="##">加入文轩</a>&nbsp;|
            <a href="##">合作伙伴</a>
        </h3>
        <p>川公网安备 51010602000457号&nbsp;|&nbsp;<a href="##">出版物经营许可证</a>&nbsp;|&nbsp;蜀ICP备1101号</p>
        <p>Copyright(C) 文轩网2000-2020 版权所有 丨 客服热线：400-072-0808</p>
    </div>
</body>
</html>
<script src="js/jquery.1.12.4.js"></script>
<script src="js/jq.banner1.0.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/index.js"></script>